<template>
  <div class="balance-wrapper">
    <div class="invite-title"><a href="javascript:;" @click="returnHref"><img src="../../assets/img/return.png"></a><p>游戏币提取</p></div>
    <div class="balance-content">
      <div class="user-info">
        <ul>
          <li><label>游戏名称：</label><p>六六棋牌</p></li>
          <li><label>可发放额：</label><p>{{haveGold}}</p><label>金币</label></li>
          <li><label>微信名称：</label><p>{{nickName}}</p></li>
          <!--<li><label>最后结算日期：</label><p>{{afterDate}}</p></li>-->
          <li>
            <label>发放金币：</label><p>{{selectNum}}</p>
          </li>
          <li>
            <dl class="gold-balance">
              <dd v-for="(item,index) in gold" :key="index" :class="{'goldCurrent':goldCurrent === index}" @click="selectGold(item,index)">{{item}}</dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="balance-btn">
        <a href="javascript:;" @click="sendGame">发放至游戏</a>
        <a href="javascript:;" @click="operate">操作记录</a>
      </div>
      <div class="be-careful">
        <h3>注：</h3>
        <ul>
          <li v-for="(msg,index) in careful" :key="index">{{msg}}</li>
        </ul>
        <p>▲温馨提示：每天只能发放24次，相同金币发放一分钟最多一次，请妥善使用。</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "balance",
      data(){
          return{
            gold:[10,20,50,100,200,500,1000,3000,5000,10000],
            goldCurrent:'',
            careful:[
              '1、"发放至游戏"会将金币发放到绑定游戏ID的余额中',
              '2、如有问题请联系客服'
            ],
            haveGold:0,
            nickName:'',
            afterDate:'',
            selectNum:''
          }
      },
      created(){
        this.nickName = sessionStorage.getItem('nickname')
        this.getGold()
      },
      methods:{
        sendGame(){
          if(this.selectNum == ''){
            this.$message({message: '请选择金币数量', type: 'error',duration:1200});
            return
          }
          let amountGold = parseInt(this.selectNum) * 1000
          this.$axios.post('/withdrawl',{amount:amountGold},this.global().token).then((res)=>{
            if(res.status == 200){
              this.$message({message: '提取成功', type: 'success'});
              this.getGold()
            }else{
              this.$message({message: res.data, type: 'error',duration:1200});
            }
          })
        },
        getGold(){
          this.$axios.get('/incomes',{},this.global().token).then((res)=>{
            if(res.status == 200){
              this.haveGold = parseFloat(res.data).toFixed(2)
            }
          })
        },
        operate(){
          this.$router.push({path:'/bank'})
        },
        returnHref(){
          this.$router.go(-1)
        },
        selectGold(val,index){
          this.selectNum = val
          this.goldCurrent = index
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "../../assets/css/title.styl"
  .balance-content
    padding:0 .2rem
    .user-info
      padding-top:.1rem
      width:100%
      border-bottom .01rem solid #aaa
      &>ul>li
        margin-bottom .1rem
        display flex
        font-size:.14rem
        color:#333
        &>p
          color:#f00
        .gold-balance
          display flex
          flex-wrap:wrap
          &>dd
            margin-right:.15rem
            margin-bottom .1rem
            flex 0 0 1rem
            font-size:.15rem
            color:#333
            background: #ccc
            text-align center
            line-height:.3rem
            -webkit-border-radius: .05rem
            -moz-border-radius: .05rem
            border-radius: .05rem
          .goldCurrent
            color:#fff
            background: #0571de

    .balance-btn
      display flex
      padding .1rem 0
      &>a
        display block
        margin-right:.15rem
        flex 0 0 1rem
        line-height:.3rem
        text-align center
        font-size:.15rem
        color:#fff
        border-radius .05rem
        background: #0571de
    .be-careful
      padding-top:.1rem
      &>h3
        font-size:.15rem
        color:#0571de
        padding-bottom .1rem
      &>ul>li
        margin-bottom .1rem
        font-size:.14rem
        color:#0571de

      &>p
        font-size:.14rem
        color:#f00
        padding-bottom .2rem
</style>
